<template>
  <div class="sitting">
    <el-row>
      <el-card class="main">
        <el-form label-width="180px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="计薪设置" name="first">

              <el-form-item label="对应社保自然月">
                <el-select v-model="sittingForm.socialSecurityType" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-tooltip content="如果201606月工资中扣除2016年6月自然月的社保公积金，请选择当月；如果扣除2016年7月自然月的社保公积金，请选择次月。" placement="top">
                  <i class="el-icon-bell" />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="社保数据来源">
                <el-input v-model="defaultInfo.sbtitle" placeholder="请输入内容" style="width: 200px;" disabled />

                <el-tooltip content="计算工资时的五险一金金额将取自社保报表" placement="top">
                  <i class="el-icon-bell" />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="考勤数据来源">
                <el-input v-model="defaultInfo.kqtitle" placeholder="请输入内容" style="width: 200px;" disabled />

                <el-tooltip content="计算工资时的考勤数据将取自考勤统计表" placement="top">
                  <i class="el-icon-bell" />
                </el-tooltip>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="津贴设置" name="second">
              <el-form-item label="通用方案">
                <el-input v-model="sittingForm.subsidyName" placeholder="请输入内容" style="width: 400px;" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="sittingForm.subsidyRemark" placeholder="请输入内容" style="width: 400px;" />
              </el-form-item>
              <el-form-item label="津贴名称">
                <el-row>
                  <el-row>
                    <el-input v-model="defaultInfo.jtbtitle" placeholder="请输入内容" style="width: 200px;" disabled />
                    <el-select v-model="sittingForm.transportationSubsidyScheme" placeholder="请选择">
                      <el-option
                        v-for="item in SubsidyScheme"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-tooltip content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；" placement="top">
                      <i class="el-icon-bell" />
                    </el-tooltip>
                    <el-input v-model="sittingForm.transportationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
                  </el-row>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-row>
                    <el-input v-model="defaultInfo.txbttitle" placeholder="请输入内容" style="width: 200px;" disabled />
                    <el-select v-model="sittingForm.communicationSubsidyScheme" placeholder="请选择">
                      <el-option
                        v-for="item in SubsidyScheme"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-tooltip content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；" placement="top">
                      <i class="el-icon-bell" />
                    </el-tooltip>
                    <el-input v-model="sittingForm.communicationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
                  </el-row>
                </el-row>

                <el-row style="margin-top: 10px;">
                  <el-row>
                    <el-input v-model="defaultInfo.wcbttitle" placeholder="请输入内容" style="width: 200px;" disabled />
                    <el-select v-model="sittingForm.lunchAllowanceScheme" placeholder="请选择">
                      <el-option
                        v-for="item in SubsidyScheme"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-tooltip content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；" placement="top">
                      <i class="el-icon-bell" />
                    </el-tooltip>
                    <el-input v-model="sittingForm.lunchAllowanceAmount" placeholder="请输入内容" style="width: 200px;" />
                  </el-row>
                </el-row>

                <el-row style="margin-top: 10px;">
                  <el-row>
                    <el-input v-model="defaultInfo.zfbttitle" placeholder="请输入内容" style="width: 200px;" disabled />
                    <el-select v-model="sittingForm.housingSubsidyScheme" placeholder="请选择">
                      <el-option
                        v-for="item in SubsidyScheme"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-tooltip content="每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额； 每月（按出勤日）：金额*实际出勤天数/应出勤工作日； 每月（按计薪日）：金额*计薪天数/计薪标准（如21.75）；" placement="top">
                      <i class="el-icon-bell" />
                    </el-tooltip>
                    <el-input v-model="sittingForm.housingSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
                  </el-row>
                </el-row>
              </el-form-item>
              <el-form-item label="适用计税方式">
                <el-radio-group v-model="defaultInfo.taxCalculationType">
                  <el-radio :label="1">税前</el-radio>
                  <el-radio :label="2">税后</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
          <el-form-item>
            <el-button type="primary" @click="saveSetting">提交</el-button>
            <el-button @click="loadData">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getSalarySettings, saveSalarySettings } from '@/api/salarys'
export default {

  name: 'SalarySitting',
  data() {
    return {
      radio: 1,
      value: 1,
      activeName: 'first',
      options: [{ value: 1, label: '当月' }, { value: 2, label: '次月' }],
      SubsidyScheme: [{ value: 1, label: '每日出勤' }, { value: 2, label: '每月出勤' }],
      defaultInfo: {
        sbtitle: '社保模块',
        kqtitle: '考勤模块',
        jtbtitle: '交通补贴',
        txbttitle: '通讯补贴',
        wcbttitle: '午餐补贴',
        zfbttitle: '住房补贴'
      },
      sittingForm: {

      }
    }
  },
  created() {
    this.loadData()
  }, methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async loadData() {
      console.log('loadData')
      const res = await getSalarySettings()
      console.log(res)
      this.sittingForm = res
    },
    async saveSetting() {
      await saveSalarySettings(this.sittingForm)
      this.$message.success('保存成功')
    }
  }

}
</script>

<style>
    .main{
        width: 100%;
        padding: 20px;
    }
</style>
